<template>
  <div class="h-full">
    <ProTable
      ref="tableRef"
      :fetchListApi="_getEarthquakeQuickReport"
      :columns="columns"
      row-key="msgId"
      :row-class-name="(record) => (record.magnitude >= 6 ? 'warning-row' : '')"
    >
    </ProTable>
  </div>
</template>

<script setup lang="tsx">
import { computed, ref } from 'vue';
import dayjs from 'dayjs';
import { ProTable, ProTableProps } from '@/components/ProTable/index';
import { listToEnum } from '@/utils/utils';
import { getEarthquakeQuickReport } from '@/api/base';
import { fetchDictOfType } from '@/api/dict';

const tableRef = ref();
const sysReportTypeEnum = ref<Record<string, any>>({});
const inti = () => {
  fetchDictOfType('sys_report_type').then((res) => {
    sysReportTypeEnum.value = listToEnum(
      res.data as any,
      'dictValue',
      'dictLabel',
    );
  });
};
inti();

const now = dayjs();
const DateRangeMap = {
  lastWeekRange: [
    now.subtract(7, 'day').startOf('day').valueOf(),
    now.endOf('day').valueOf(),
  ],
  lastMonthRange: [
    now.subtract(1, 'month').startOf('day').valueOf(),
    now.endOf('day').valueOf(),
  ],
  last3MonthsRange: [
    now.subtract(3, 'month').startOf('day').valueOf(),
    now.endOf('day').valueOf(),
  ],
  last6MonthsRange: [
    now.subtract(6, 'month').startOf('day').valueOf(),
    now.endOf('day').valueOf(),
  ],
  lastYearRange: [
    now.subtract(1, 'year').startOf('day').valueOf(),
    now.endOf('day').valueOf(),
  ],
};
const _getEarthquakeQuickReport = (params: any) => {
  let startTime = undefined;
  let endTime = undefined;
  const time = params.time;
  if (time) {
    startTime = DateRangeMap[time as keyof typeof DateRangeMap][0];
    endTime = DateRangeMap[time as keyof typeof DateRangeMap][1];
  }
  return getEarthquakeQuickReport({ ...params, endTime, startTime });
};
const time = {
  lastWeekRange: '近七天',
  lastMonthRange: '近一个月',
  last3MonthsRange: '近三个月',
  last6MonthsRange: '近半年',
  lastYearRange: '近一年',
};
const level = {
  '2': '三级以下',
  '3': '三级以上',
  '4': '四级以上',
  '5': '五级以上',
  '6': '六级以上',
  '7': '七级以上',
  '8': '八级以上',
};
const columns = computed<ProTableProps['columns']>(() => [
  {
    title: '消息发布ID',
    dataIndex: 'msgId',
    hideInSearch: true,
  },
  {
    title: '消息类型',
    dataIndex: 'msgType',
    hideInSearch: true,
    valueEnum: { ...sysReportTypeEnum.value },
  },
  {
    title: '事件ID',
    dataIndex: 'eewId',
    hideInSearch: true,
  },
  {
    title: '发震时间',
    dataIndex: 'oritime',
    hideInSearch: true,
  },
  {
    title: '震中地名',
    dataIndex: 'locname',
  },
  {
    title: '经度',
    dataIndex: 'longitude',
    hideInSearch: true,
  },
  {
    title: '纬度',
    dataIndex: 'latitude',
    hideInSearch: true,
  },
  {
    title: '震源深度',
    dataIndex: 'focdepth',
    hideInSearch: true,
  },
  {
    title: '震级',
    dataIndex: 'magnitude',
    hideInSearch: true,
  },
  {
    title: '发震时间',
    dataIndex: 'time',
    valueEnum: { ...time },
    hideInTable: true,
  },
  {
    title: '发震震级',
    dataIndex: 'level',
    valueEnum: { ...level },
    hideInTable: true,
  },
]);
</script>
<style lang="scss" scoped>
:deep(.warning-row) {
  color: #ff4444;
}
</style>
